<template>
  <div>
    <div class="Swiper">
      <div class="Swiper-content">
        <div class="Swiper-item" v-for="(item, index) in imageUrl" :key="index">
          <div class="swiper-bg">
            <img :src="item" alt="" />
          </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper } from "./swiper.js";
import { imgUrl } from "@/utils/common";

export default {
  name: "carousel",
  data() {
    return {
      imageUrl: [
        imgUrl + "certificate1.png",
        imgUrl + "certificate6.png",
        imgUrl + "certificate2.png",
        imgUrl + "certificate3.png",
        imgUrl + "certificate4.png",
        imgUrl + "certificate5.png",
      ],
      classList: ["one", "two", "three", "four", "five", "six"],
    };
  },
  methods: {
    swiper() {
      new Swiper({
        classList: this.classList,
        SwiperContent: ".Swiper-content",
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    },
  },

  mounted() {
    this.swiper();
  },
};
</script>

<style scoped lang="scss">
.Swiper {
  height: 250px;
  width: 100%;
  position: relative;
  /* margin: 150px auto; */
}

.Swiper-content {
  height: 100%;
  width: 100%;
  position: relative;
  left: 65px;
}

.Swiper-content > div {
  position: absolute;
  /* height: 150px; */
  height: 530px;
  width: 500px;
  /* margin-top: 50px; */
  transition: all 0.6s;
  /* opacity: 0; */
}
.Swiper-content img {
  /* height: 100%;
  width: 100%; */
}
.one {
  z-index: 1;
  transform: scale(0.8);
  left: -60px;
  /* box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2); */
}
.two {
  z-index: 2;
  transform: scale(0.9);
  left: 75px;
  /* box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2); */
}

.three {
  z-index: 9;
  transform: scale(1);
  left: 350px;
  /* box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2); */
}
.four {
  z-index: 2;
  transform: scale(0.9);
  left: 599px;
  /* box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2); */
}

.five {
  z-index: 1;
  transform: scale(0.8);
  left: 835px;
  /* box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2); */
}
.six {
  z-index: 1;
  transform: scale(0.8);
  left: 835px;
  /* box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2); */
}
.seven {
  z-index: 1;
  transform: scale(0.8);
  left: 835px;
  /* box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2); */
}
.eit {
  z-index: 1;
  transform: scale(0.8);
  left: 835px;
  /* box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2); */
}
.swiper-bg {
  width: 386px;
  height: 530px;
  background: linear-gradient(181deg, #e3ecf9 0%, #f6faff 100%);
  /* box-shadow: -4px 20px 42px -1px rgba(155, 155, 155, 0.15); */
  border-radius: 8px 8px 8px 8px;
  border: 3px solid #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center;
  vertical-align: middle; */
  img {
    display: inline-block;
  }
}
</style>
